import React, { FC, useState, useEffect } from 'react'
import Recommend from '@/compents/Recommend'
import Tags from '@/compents/Tags'
import Header from '@/compents/header/Header'
import { Card, Affix } from 'antd'
import { getAllList } from '@/api/article'
import { useNavigate, useParams } from 'react-router-dom'
// import {
//   HeartOutlined,
//   EyeOutlined,
//   ShareAltOutlined
// } from '@ant-design/icons'
import style from '../index/compent.module.scss'
const Index: FC = () => {
  const [allList, setAllList] = useState([])

  const navigate = useNavigate()
  const params = useParams()
  console.log(params)

  useEffect(() => {
    getAllList()
      .then(({ data }) => {
        setAllList(data.data[0])
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  const obj = allList.filter((item: any) => {
    return item.category.value === params.id
  })

  // allList.find((item: any) => {
  //   return item.category.value === params.id
  // })
  console.log(obj)

  return (
    <div className="content">
      <Header />
      <div className={style.con}>
        <div className={style.left}>
          <Card>
            <div className={style.tac}>
              <p>
                <span>{params.id}</span>分类文章
              </p>
              <p>
                共搜索到<span>{obj.length}</span>篇
              </p>
            </div>
          </Card>
          <nav>
            <a className="active" href="/en">
              all
            </a>
            <span
              onClick={() => {
                navigate('/category/node')
              }}
            >
              node
            </span>
            <span
              onClick={() => {
                navigate('/category/vue')
              }}
            >
              vue
            </span>
            <span
              onClick={() => {
                navigate('/category/react')
              }}
            >
              react
            </span>
            <span
              onClick={() => {
                navigate('/category/interview')
              }}
            >
              面试
            </span>
            <span
              onClick={() => {
                navigate('/category/front-end')
              }}
            >
              前端
            </span>
            <span
              onClick={() => {
                navigate('/category/back-end')
              }}
            >
              后端
            </span>
            <span
              onClick={() => {
                navigate('/category/coding')
              }}
            >
              编程
            </span>
            <span
              onClick={() => {
                navigate('/category/develop')
              }}
            >
              开发
            </span>
            <span
              onClick={() => {
                navigate('/category/code%20life')
              }}
            >
              代码人生
            </span>
            <span
              onClick={() => {
                navigate('/category/life')
              }}
            >
              人生
            </span>
          </nav>

          {/* <main>
            {obj.length > 0
              ? (
                  obj.map((item: any) => {
                    return (
                  <div className={style.item} key={item.id}
                  onClick={() => {
                    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
                    navigate('/details/' + item.id, { state: item })
                  }}
                  >
                    <div className={style.head}>
                      {item.title} | {item.category.label}
                    </div>
                    <div className={style.main}>
                      <img src={item.cover} alt="" />
                      <div>
                        <HeartOutlined />
                        <span>{item.likes}</span> · <EyeOutlined />{' '}
                        <span>{item.views}</span> · <ShareAltOutlined />
                      </div>
                    </div>
                  </div>
                    )
                  })
                )
              : (
              <div className={style.empty}>暂无数据</div>
                )}
          </main> */}
        </div>

        <div className={style.right}>
          <Affix offsetTop={20} onChange={(affixed) => console.log(affixed)}>
            <Recommend />
            <Tags />
          </Affix>
        </div>
      </div>
    </div>
  )
}

export default Index
